<template>
  <div>
    <div class="cover" v-if="isShow"></div>
    <transition @before-enter="beforeEnter" @enter="enter">
      <slot></slot>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
    };
  },
  methods: {
    beforeEnter() {
      this.isShow = true;
    },
    enter() {
      setTimeout(() => {
        this.isShow = false;
      }, 200);
    },
  },
};
</script>

<style>
.v-enter-active {
  animation: animate 1s linear;
}
@keyframes animate {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.cover {
  width: 100%;
  height: 100%;
  background-color: #fff;
  position: fixed;
  z-index: 1000;
}
</style>